<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  craeteDynamicBlinkCircleGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";
import AceEditor from "@/components/aceEditor.vue";

const htmlStr = ref(`
   <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  craeteDynamicBlinkCircleGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";


const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000)
  craeteDynamicBlinkCircleGraphics(cViewer.value,{
    position:{"lon":113.59,"lat":34.74,height:50},
    semiMinorAxis:500.0,
    semiMajorAxis:500.0
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
<\/script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
`);

const tsStr = ref(`
 /**
 * 创建闪烁圆
 * @param viewer
 * @param {object} options
 * @param {object} options.position - 坐标数组  eg:{"lon":113.59,"lat":34.74,height:50}
 * @param {number} options.alp - 频率   default:1   最大值就是1
 * @param {boolean} options.flog - 显示雾气效果  default:true
 * @param {number} options.height - 高度
 * @param {number} options.semiMinorAxis - 短半轴  default:2000.0
 * @param {number} options.semiMajorAxis - 长半轴   default:2000.0
 * @desc 注：options.alp  和 options.flog 组合使用，用户控制透明底先降低还是先升高，最大值是1
 */
const  craeteDynamicBlinkCircleGraphics= (viewer:any,options:any) =>{
    let defaultOption:any={
        alp:1,
        flog:true,
        semiMinorAxis:2000,
        semiMajorAxis:2000,
        height:10,
    };
    Object.assign(defaultOption,options)
    let { position,alp,flog,semiMinorAxis,semiMajorAxis,height } =defaultOption;
    if(!position){return;}
    let entity:any=new Cesium.Entity();
    entity.position=Cesium.Cartesian3.fromDegrees(position['lon'],position['lat'],position['height']);
    entity.ellipse = {
        semiMinorAxis: semiMinorAxis || 2000.0,
        semiMajorAxis: semiMajorAxis || 2000.0,
        height:height,
        material: new Cesium.ColorMaterialProperty(
            new Cesium.CallbackProperty(function () {
                if (flog) {
                    alp = alp - 0.05;
                    if (alp <= 0) {
                        flog = false; // hide
                    }
                } else {
                    alp = alp + 0.05;
                    if (alp >= 1) {
                        flog = true; // show
                    }
                }
                return Cesium.Color.RED.withAlpha(alp);
            }, false)
        ),
    };
    viewer.entities.add(entity)
    return entity;
}

 export {
   craeteDynamicBlinkCircleGraphics
   }
`);

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000)
  craeteDynamicBlinkCircleGraphics(cViewer.value,{
    position:{"lon":113.59,"lat":34.74,height:50},
    semiMinorAxis:500.0,
    semiMajorAxis:500.0
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
